<template>
    <div class="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
        <!-- 错误信息卡片 -->
        <div
            class="bg-white rounded-2xl shadow-xl max-w-md w-full p-8 transform transition-all duration-500 hover:shadow-2xl">
            <!-- 错误图标 -->
            <div class="flex justify-center mb-6">
                <div class="w-20 h-20 rounded-full bg-red-100 flex items-center justify-center">
                    <i class="fa fa-exclamation-triangle text-4xl text-red-500"></i>
                </div>
            </div>

            <!-- 错误标题 -->
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-gray-800 text-center mb-2"
                :class="{ 'animate-pulse': is404 }">
                {{ errorCode }}
            </h1>

            <!-- 错误描述 -->
            <p class="text-gray-600 text-center text-lg mb-8">
                {{ errorMessage }}
            </p>
        </div>

        <!-- 页脚信息 -->
        <p class="text-gray-500 mt-8 text-sm">
            如果问题仍然存在，请联系 <a href="mailto:support@example.com" class="text-blue-500 hover:underline">技术支持</a>
        </p>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

// 接收错误信息作为props
const props = defineProps({
    errorCode: {
        type: String,
        default: '666'
    },
    errorMessage: {
        type: String,
        default: '抱歉，当前系统运行异常'
    }
})

const router = useRouter()
const is404 = ref(props.errorCode === '404')

// 返回上一页的方法
const goBack = () => {
    if (router.history.length > 1) {
        router.back()
    } else {
        router.push('/')
    }
}

// 页面加载动画
onMounted(() => {
    const card = document.querySelector('.bg-white.rounded-2xl')
    if (card) {
        card.classList.add('opacity-0', 'translate-y-8')
        setTimeout(() => {
            card.classList.remove('opacity-0', 'translate-y-8')
        }, 100)
    }
})
</script>

<style scoped>
/* 自定义动画效果 */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>